<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">添加用户</a></el-breadcrumb-item>
        </el-breadcrumb>
        <el-card :body-style="{ padding: '0px' }">
            <el-card class="Add-User-card">
                <el-form :model="RegUserForm" :rules="RegiFormRules" ref="RegiFormRef" label-width="120px" label-position='right'>
                    <h2 class="Regi-title">添加用户</h2>
                    <!-- 用户名 -->
                    <el-form-item prop="username" label="用户名">
                        <el-input v-model="RegUserForm.username" placeholder="请输入用户名" style="width:300px;"></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="password" label="密码">
                        <el-input v-model="RegUserForm.password" placeholder="请输入密码" show-password style="width:300px;"></el-input>
                    </el-form-item>
                    <!-- 确认密码 -->
                    <el-form-item prop="password1"  label="确认密码">
                        <el-input v-model="RegUserForm.password1" placeholder="请输入确认密码" show-password style="width:300px;"></el-input>
                    </el-form-item>
                    <!-- 手机号 -->
                    <el-form-item prop="phone"  label="手机号">
                        <el-input v-model="RegUserForm.phone" placeholder="请输入手机号" style="width:300px;"></el-input>
                    </el-form-item>
                    <!-- 选择权限 -->
                    <el-form-item label="选择权限:">
                        <el-select v-model="RegUserForm.power" placeholder="请选择申请权限" style="width:300px;">
                            <el-option v-for="(item,index) in PowerList" :key="index" :value='item.pname'>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 选择权限 -->
                    <el-form-item label="选择公司:">
                        <el-select v-model="RegUserForm.company" placeholder="请选择所属公司" style="width:300px;">
                            <el-option v-for="(item,index) in CompList" :key="index" :value='item.name'>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="El-Button-Submit">
                        <el-button type="primary" @click="SubmitAdd">提交</el-button>
                        <el-button type="info" @click="ResetReg">重置</el-button>

                    </el-form-item>
                </el-form>
            </el-card>
        </el-card>
    </div>
</template>

<script>
import { add_user_post, power_list_get, before_each_get } from '../axios_api/api'
export default {
    data() {
        return {
            RegUserForm: {
                username: '',	// 用户名
                password: '',	// 密码
                password1: '',	// 确认密码
                phone: '',	// 手机号
                power: '',		// 权限
                company: '',	// 公司
            },
            // 这是表单的验证规则对象
            RegiFormRules: {
                // 验证用户是否合法
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { pattern: /^[a-zA-Z]([a-zA-Z0-9]){5,16}$/, message: '用户名以字母开头，且长度在 6 到 16 个字符' },
                ],
                // 验证密码是否合法
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { pattern: /^[a-zA-Z]([a-zA-Z0-9]){5,16}$/, message: '密码以字母开头，且长度在 6 到 16 个字符' },
                ],
                // 验证两次密码是否一致
                password1: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },
                    { pattern: /^[a-zA-Z]([a-zA-Z0-9]){5,16}$/, message: '两次密码不一致' },
                ],
                // 验证手机号是否符合规范
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '手机号格式错误' },
                ],
            },
            pswd1: false,
            PowerList: [],
            CompList: [],
        }
    },
    mounted() {
        this.get_power();
        this.before_each_get();
    },
    methods: {
        // 路由拦截
        before_each_get() {
					let token = localStorage.getItem('token')
            before_each_get(token).then(resp => {
                if (resp.code != 200) {
									this.$message.error('添加用户需要管理员权限')
                    this.$router.go(-1);
                }
            })
        },
        // 提交添加
        SubmitAdd() {
					console.log(this)
            let UserForm = this.RegUserForm;
            this.$refs.RegiFormRef.validate(valid => {
                if (!valid) return;
                // 遍历将公司名转换成公司id，以便于后端存入数据库
                for (let i = 0; i < this.CompList.length; i++) {
                    // 如果选择的公司名跟数据库中的公司名一样
                    if (this.CompList[i].name === UserForm.company) {
                        // 将comp变量等于该公司的id
                        UserForm.company = String(this.CompList[i].id)
                    }
                }
                // 发起注册提交请求
                let data = { UserForm: UserForm, token: localStorage.getItem('token') }
                add_user_post(data).then(resp => {
                    if (resp.code === 200) {
                        this.$message.success(resp.message)
                        this.$router.push('/user_info')
                    } else {
                        this.$message.error(resp.message)
                    }
                })
            })
        },
        // 重置输入数据
        ResetReg() {
            this.$refs.RegiFormRef.resetFields();
            this.RegUserForm.company = '';
            this.RegUserForm.power = '';
        },
        // 获取短信验证码
        get_code() {
            // 正则判断手机号是否合法，如不合法，无法调用获取短信验证码
            if (/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.RegUserForm.phone)) {
                // 将手机号传给后端
                let params = { phone: this.RegUserForm.phone }
                send_code_post(params).then(resp => {
                    if (resp.code === 200) {
                        this.$message.success(resp.message)
                    } else {
                        this.$message.error(resp.message)
                    }
                })
            } else {
                this.$message.error('请输入正确的手机号')
            }

        },
        // 获取权限及公司列表
        get_power() {
            power_list_get().then(resp => {
                if (resp.code === 200) {
                    this.PowerList = resp.powerlist
                    this.CompList = resp.complist
                    console.log(this.PowerList)
                    console.log(this.CompList)
                }
            })
        }
    },
}
</script>

<style>
</style>